<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-用户信息 开发者: 麦沃德科技-半夏  
+---------------------------------------------------------------------- -->

<template>
	<view class="component-user-info" :style="{'--theme-color': themeColor}">
		<!-- 用户信息 -->
		<view class="user-info-content flex align-items-center" @click="toModifyUser()" v-if="token">
			<image class="content-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
			<view class="content-info flex-item">
				<view class="info-name text-ellipsis">{{userInfo.nickname}}</view>
				<view class="info-phone text-ellipsis" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
			</view>
		</view>
		<!-- 登录 -->
		<view class="user-info-login" v-else @click="toLogin()">
			<view class="login-text">立即登录</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentUserInfo",
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				token: state => state.user.token,
				userInfo: state => state.user.userInfo,
			})
		},
		methods: {
			// 跳转登录
			toLogin() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/login/index"
				})
			},
			// 跳转修改用户信息
			toModifyUser() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/login/update"
				})
			},
		},
	}
</script>

<style lang="scss">
	.component-user-info {
		padding: 48rpx 16rpx 32rpx;

		.user-info-content {
			.content-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 32rpx;
			}

			.content-info {
				.info-name {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.info-phone {
					color: #5A5B6E;
					font-size: 32rpx;
					line-height: 40rpx;
					margin-top: 12rpx;
					text-align: left;
				}
			}
		}

		.user-info-login {
			.login-text {
				color: #242629;
				font-size: 36rpx;
				font-weight: 600;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>